<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>仓储管理</el-breadcrumb-item>
				<el-breadcrumb-item>出库管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="issueManagement-body">
			<div class="body-header">
				<div style="margin-right: 10px">
					<span>出库状态:&nbsp;&nbsp;</span>
					<el-select placeholder="请选择出库状态" v-model="pageData.isOutbound" style="width: 200px" size="small">
						<el-option
								v-for="item in statusData"
								:key="item.id"
								:label="item.label"
								:value="item.id">
						</el-option>
					</el-select>
				</div>
				<div style="margin-right: 10px">
					<span>出库日期:&nbsp;&nbsp;</span>
					<el-date-picker  v-model="pageData.outBoundTime"  value-format="yyyy-MM-dd"  type="date" placeholder="请选择出库日期" size="small"></el-date-picker>
				</div>
			
				<div style="margin-right: 10px">
					<span>订单编号:&nbsp;&nbsp;</span> <el-input placeholder="请输入入库单号" v-model="pageData.orderNum" size="small" style="width: 200px;"></el-input>
				</div>
				<div style="margin-right: 10px"><el-button type="info" icon="el-icon-search" size="small" @click="getPage">搜 索</el-button></div>
				<div style="margin-right: 10px"><el-button  icon="el-icon-refresh-right" size="small" @click="resetPage">重 置</el-button></div>
			
			</div>
			<div class="body-table">
				<el-table
						:data="tableData"
						stripe
						style="width: 100%">
					<el-table-column
							align="center"
							prop="order.orderNum"
							label="订单编号">
					</el-table-column>
					<el-table-column
							align="center"
							label="出库状态">
						<template slot-scope="scope">
							{{scope.row.isOutbound === 1? '已出库' : '未出库'}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							show-overflow-tooltip
							label="出库日期">
						<template slot-scope="scope">
							{{scope.row.outBoundTime === null? '暂未出库' : scope.row.outBoundTime}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.good.name"
							show-overflow-tooltip
							label="商品名称">
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.good.totalNum"
							label="商品数量">
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.receiptName"
							label="收件人姓名">
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.receiptAddress"
							show-overflow-tooltip
							label="收件人地址">
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.receiptPhone"
							label="收件人电话">
					</el-table-column>
					<el-table-column
							align="center"
							label="收件人国家">
						<template slot-scope="scope">
							{{scope.row.order.receiptCountry === 1? '美国' : scope.row.order.receiptCountry  === 2? '韩国' : scope.row.order.receiptCountry === 3 ?'日本': scope.row.order.receiptCountry ===4 ? '新加坡' : '澳大利亚' }}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							show-overflow-tooltip
							label="物流商">
						<template slot-scope="scope">
							{{scope.row.logistics ?  scope.row.logistics.name : '暂无'}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							label="出库仓位">
						<template slot-scope="scope">
							A4
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							label="发货员">
						<template slot-scope="scope">
							系统管理员
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							width="250px"
							label="操作">
						<template slot-scope="scope">
							<el-button type="warning " :disabled="scope.row.isOutbound === 1" size="mini" @click="outBound(scope.row.id)">出 库 完 成 确 认</el-button>
							<el-button type="danger " :disabled="scope.row.isOutbound === 0" size="mini" @click="undo(scope.row.id)">撤 回</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="body-page">
				<el-pagination
						background
						layout="prev, pager, next"
						@current-change="handleCurrentChange"
						:page-size="pageData.pageSize"
						:total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template >

<script >
	import { deliveryOutBound,deliveryOutConfirm  } from "../api/storageModules";

    export default {
        name: "issueManagement",
        data(){
            return{
                pageData:{
                    pageIndex: 1,
                    pageSize: 10,
                  	isOutbound:null,
					outBoundTime:null,
					orderNum:null
				},
                statusData:[
                    {
                        id: null,
                        label: '全部'
                    },
                    {
                        id: 1,
                        label: '已确认'
                    },
                    {
                        id: 0,
                        label: '未确认'
                    }
                ],
                tableData: [],
				total:null
            }
        },
		mounted() {
            this.getPage()
        },
        methods:{
            //列表
            async getPage(){
                const { data } = await deliveryOutBound(this.pageData)
				if (data.code === 200) {
				    this.tableData = data.data.data
					this.total = data.data.total
				}
			},
			//重置
            resetPage(){
                this.pageData.isOutbound = null
                this.pageData.outBoundTime = null
                this.pageData.orderNum = null
				this.getPage()
            },
            //分页
            handleCurrentChange(val) {
                this.pageData.pageIndex = val
                this.getPage()
            },
			//出库前确认
            outBound(id){
                this.$confirm('确定出库,是否继续?', '提示', {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    deliveryOutConfirm(id ,1 ).then( data => {
                        console.log(data)
                        if (data.data.code === 200) {
                            this.$message.success(data.data.message)
                            this.getPage()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'撤销出库!'
                    })
                })
            },
            undo(){
                this.$confirm('确定撤销,是否继续?', '提示', {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    deliveryOutConfirm(id ,0 ).then( data => {
                        console.log(data)
                        if (data.data.code === 200) {
                            this.$message.success(data.data.message)
                            this.getPage()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'取消撤销!'
                    })
                })
            },
		}
    }
</script >

<style scoped lang="less">
	.issueManagement-body{
		width: 100%;
		height: calc(100% - 50px);
		background-color: #ffffff;
		.body-header{
			width: 100%;
			height: 50px;
			display: flex;
			margin-bottom: 20px;
			align-items: center;
			justify-content: flex-end;
		}
		.body-table {
			width: 100%;
			max-height: calc(100% - 150px);
		}
		.body-page{
			width: 100%;
			height: 50px;
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >

